<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./通用/头部标识.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./通用/底部导航.css">
    
    <style>
        html{font-size: 100px;}
		    body{font-size: 16px;}
        *{font-size: 0.12rem;}
        #iot-div1-1{margin-bottom:10px}
        #iot-span1{margin-right: 35%;}
        #iot-shoppingcar{display:flex;margin-top: 5%;border-top: 1px solid;border-top-color: gainsboro;}
        #iot-choice1,#iot-choice2,#iot-choice3{padding-top: 15%;}
        #iot-price1,#iot-price2,#iot-price3{margin-right: 30%;line-height: 200%;color: red;}
        #iot-button{background-color:white;border-style:solid;border-color:bisque}
        #iot-input1,#iot-input2,#iot-input3{width:10% ;background-color:white;border-style:solid;border-color:bisque;}
   </style>
</head>
<body>
  <!-- 头部标识 -->
    <div id="iot-div1">
		<div id="iot-div1-1">黑马优购</div>
    </div>
    <div id="iot-flexbox"></div>
    <!-- 基本信息 -->
    <div>
      <span id="iot-span1">收货人：玛卡巴卡</span><span>电话：0827-666666</span><i class="iconfont">&#xe617;</i><br><br><span>收获地址：四川省雅安市雨城区东城街道666号</span>
      <hr color="red">
    </div>
    <!-- 购物车 -->
    <span><i class="iconfont">&#xe895;</i>购物车</span>
    <div style="margin-top: 5%" id="iot-shoppingcar">
      <div id="iot-choice1" onclick="choice(1)"><i class="iconfont">&#xe6d3;</i></div>
      <div style="width:70% ;"><img src="http://image4.suning.cn/uimg/b2c/newcatentries/0070147032-000000000737443426_1_800x800.jpg" alt="" style="width:100%;aspect-ratio:7/6"></div>
      <div>
        <span>三星（SAMSUNG）UA65MUC30SJXXZ 65英寸2017新款 4K超高清智能曲面电视</span><br><br><br>
        <div style="display:flex;"><span style="line-height: 200%;color: red;">￥</span><span id="iot-price1">7999</span><button id="iot-button" onclick="minus(1)"><i class="iconfont">&#xe729;</i></button><input type="text" value="1" id="iot-input1" disabled="ture"><button id="iot-button" onclick="plus(1)"><i class="iconfont">&#xe727;</i></button></div>
      </div>
    </div>
    <div id="iot-shoppingcar">
      <div id="iot-choice2" onclick="choice(2)"><i class="iconfont">&#xe6d3;</i></div>
      <div style="width:70%;"><img src="http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000679284992_1_400x400.jpg" alt="" style="width:100%;aspect-ratio:7/6"></div>
      <div>
        <span>TCL 55C5 55英寸 4K超高清 哈曼卡顿音响 64位34核 纤薄金属 人工智能 曲面电视</span><br><br><br>
        <div style="display:flex;"><span style="line-height: 200%;color: red;">￥</span><span id="iot-price2">6999</span><button id="iot-button" onclick="minus(2)"><i class="iconfont">&#xe729;</i></button><input type="text" value="1" id="iot-input2"><button id="iot-button" onclick="plus(2)"><i class="iconfont">&#xe727;</i></button></div>
      </div>
    </div>
    <div id="iot-shoppingcar">
      <div id="iot-choice3" onclick="choice(3)"><i class="iconfont">&#xe6d3;</i></div>
      <div style="width:57% ;"><img src="http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000139653303_1_400x400.jpg" alt="" style="width:100%;aspect-ratio:7/6;"></div>
      <div>
        <span>TCL L48P1S-CF 48英寸 同步院线 海量影视资源 十核智能曲面电视</span><br><br><br>
        <div style="display:flex;"><span style="line-height: 200%;color: red;">￥</span><span id="iot-price3">3231</span><button id="iot-button" onclick="minus(3)"><i class="iconfont">&#xe729;</i></button><input type="text" value="1" id="iot-input3"><button id="iot-button" onclick="plus(3)"><i class="iconfont">&#xe727;</i></button></div>
      </div>
    </div>
    <!-- 结算界面 -->
    <div style="display:flex;justify-content: space-between;">
      <div style="line-height:500%;"><i class="iconfont">&#xe6d3;</i>全选</div>
      <div style="line-height:500% ;">合计：<span style="color: red;">￥</span><span style="color: red;" id="iot-allprice">0.00</span></div>
      <div style="background-color:crimson;color: white;padding: 5% 0;width:30%;text-align:center;line-height: 200%;">结算(0)</div>
    </div>
    <!-- 底部导航 -->
    <div id="iot-div5" style="width:100%;margin-right: 0.05%;">
		<div><a href="./首页.html"><i class="iconfont">&#xe639;</i><br><span>首页</span></a></div>
		<div><a href="./分类.html"><i class="iconfont">&#xe659;</i><br><span>分类</span></a></div>
		<div style="color: red;"><i class="iconfont">&#xe62c;</i><br><span>购物车</span></div>
		<div><a href="./我的.html"><i class="iconfont">&#xe600;</i><br><span>我的</span></a></div>
	</div>


</body>
<script src="./通用/头部标识.js" type="module"></script>
<script src="./通用/底部导航.js" type="module"></script>
<script src="./rem.js" type="module"></script>
<!-- 结算界面交互 -->
<script>
function $(id){return document.getElementById(id)};
function plus(i){
var plus = parseInt($("iot-input"+i).value)+1;
$("iot-input"+i).value = plus;
console.log(plus);
}
function minus(i){
  var minus = parseInt($("iot-input"+i).value)-1;
$("iot-input"+i).value = minus;
if($("iot-input"+i).value<1){$("iot-input"+i).value = 1}
console.log(minus);
}
var flag = 0;
function choice(i){

  if(flag==0){
  $("iot-choice"+i).style.color = "red";
  var a = parseInt($("iot-price"+i).innerHTML);
  var b = parseInt($("iot-input"+i).value);
  var c = parseInt($("iot-allprice").innerHTML);
 var price = a * b +c;
 $("iot-allprice").innerHTML = price
  flag=1;
}
else if(flag==1){
  $("iot-choice"+i).style.color = "black";
  var a = parseInt($("iot-price"+i).innerHTML);
  var b = parseInt($("iot-input"+i).value);
  var c = parseInt($("iot-allprice").innerHTML);
var price = c-a*b
$("iot-allprice").innerHTML = price
  flag=0;
}
}
</script>
</html>